<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <link rel="stylesheet" href="../assets/css/login.css">
    <script src="common.js" type="text/javascript"></script>
    <link rel="icon" href="/favicon.ico">
    <title>管理后台</title>
</head>

<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-page-header">
        <div class="pagewrap">
					<span class="layui-breadcrumb">
                  <a href="">首页</a>
                  <a href="">菜单管理</a>
                  <a><cite>二级菜单</cite></a>
                </span>
            <h2 class="title">二级菜单</h2>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="form-box">
                    <div class="layui-form layui-form-item">

                    </div>
                    <button class="layui-btn layui-btn-blue addBtn"><i class="layui-icon">&#xe654;</i>新增</button>
                    <table id="demo" lay-filter="useruv">

                    </table>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
    <div class="add-container">
        <form class="login-form layui-form">
            <div class="closeBtn">×</div>
            <div class="layui-form-item">
                <div class="" style="margin-left: 0">
                    <select id="FirstLev" name="FirstLev">
                        <option value="">选择一级菜单</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <input type="text" name="goodsTypeTwoName" id="goodsTypeTwoName" required  lay-verify="required" placeholder="二级菜单名" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-item">
                <textarea name="description" id="description" placeholder="请输入备注" class="layui-textarea"></textarea>
                <!--<input type="text" name="description" id="description" required  lay-verify="required" placeholder="备注" autocomplete="off" class="layui-input">-->
            </div>
            <button type="submit" class="login-button">确定<i class="ai ai-enter"></i></button>
        </form>
    </div>
</div>
<script src="../assets/layui.all.js"></script>
<script>
    var element = layui.element;
    var table = layui.table;
    var form = layui.form;
    var $ = layui.$;
    // 新增提交数据
    $(".login-button").click(function () {
        let FirstLev = document.getElementById("FirstLev").value
        let goodsTypeTwoName = document.getElementById("goodsTypeTwoName").value
        let description = document.getElementById("description").value
        console.log(FirstLev)
        if (FirstLev == '') {
            layer.open({
                content: '必须选择一级导航'
            });
            return false
        }
        if (goodsTypeTwoName.trim() == '' || description.trim() == '') {
            layer.open({
                content: '数据不能为空'
            });
            return false
        }
        $.ajax({
            type: "post",
            url: webUrl + "/goodsTypeTwo/add",
            dataTpye: "json",
            data: {
                'goodsTypeId':FirstLev,
                'goodsTypeTwoName': goodsTypeTwoName,
                'description': description
            },
            async: false,
            success: function (data) {
                console.log(data)
                $('.add-container').hide()
            },
            error: function (data) {
                console.log(data)
            }
        });

    })

    //重新渲染表单
    function renderForm() {
        layui.use('form', function () {
            var form = layui.form;//高版本建议把括号去掉，有的低版本，需要加()
            form.render();
        });
    }
    // 获取一级导航列表
    $.ajax({
        type: "get",
        url: webUrl + "/goodsType/findAll",
        dataTpye: "json",
        success: function (data) {
            console.log(data)
            for (let k = 0; k < data.content.length; k++) {
                $('#FirstLev').append("<option value='" + data.content[k].goodsTypeId + "'>" + data.content[k].goodsTypeName + "</option>")
                renderForm();
            }
        }
    })
    $.ajax({
        type: "get",
        url: webUrl + "/goodsTypeTwo/findAll",
        dataTpye: "json",
        success: function (data) {
            table.render({
                elem: '#demo',
                cols: [
                    [ //标题栏
                        //    {field: 'goodsTypeId', title: 'id', width: 80, sort: true}
                        {
                            checkbox: true,
                            fixed: true
                        }, {
                        field: 'goodsTypeTwoId',
                        title: 'id',
                        width: 280,
                        sort: true,
                        fixed: true
                    }, {
                        field: 'goodsTypeTwoName',
                        title: '二级分类名',
                        width: 120
                    }, {
                        field: 'description',
                        title: '备注',
                        minWidth: 150
                    }, {
                        field: "delete",
                        title: '操作',
                        minWidth: 150,
                        toolbar: "#barDemo"
                    }
                    ]
                ],
                data: data.content,
                skin: 'line' //表格风格
                ,
                even: true,
                page: true //是否显示分页
                ,
                limits: [5, 10, 15],
                limit: 10//每页默认显示的数量
            });
        }
    });
    table.on('checkbox(useruv)', function (obj) {
        console.log(obj)
    });
    table.on('tool(useruv)', function (obj) {
        console.log(obj)
        var data = obj.data;
        if (obj.event === 'del') {
            layer.confirm('确认删除？', function (index) {
                obj.del();
                layer.close(index);
                $.ajax({
                    type: "post",
                    url: webUrl + "/goodsTypeTwo/delete",
                    dataTpye: "json",
                    data: {
                        'goodsTypeTwoId': data.goodsTypeId
                    },
                    async: false,
                    success: function (data) {
                        alert(data.msg)
                        window.onload()
                    }
                });
            });
        } else if (obj.event === 'edit') {
            layer.alert('编辑行：<br>' + JSON.stringify(data))
        }

    });
    //展示已知数据
    $('.addBtn').click(function () {
        $('.add-container').show()
    })
</script>
</body>

</html>
